<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>reading room</title>
    <link rel="stylesheet" href="css/reading.css">
    <link rel="stylesheet" type="text/css" href="css/sweetalert.css">
    
</head>
<body>
    <!-- 导航栏 -->
    <div id="NavB">
        <img src="img/ZEROG.png" alt="" id="zero">
        <div>
            <ul>
                <li><a href="index.html" id="indexBtn">首页</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="severs.html">服务指南</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a onclick="swal('','功能暂未开放','error')" style="cursor:pointer">ENGLISH</a></li>
            </ul>
        </div>
        
        <div id="down_span">
            <span id="down_span_reading">阅览室</span>
        </div>

    </div>

    <!-- 标题 -->
    <div id="title">
        <span id="title1">阅览室</span>
        <div id="line"></div>
    </div>

    <div id="mid">
        
        <!-- 内容边界 -->
        <div id="bound">
            <!-- 滑动 -->
            <div id="block">
                <!-- 滑动内容 -->
                <div id="content1">
                    <img src="img/book1.jpg">   
                </div>
                <div id="content2">
                    <img src="img/book2.jpg">
                </div>
                
                <div id="content3">
                    <img src="img/book3.jpg" alt="">
                </div>
                <div id="content4">
                    <img src="img/book4.jpg" alt="">
                </div>
                <div id="content5">
                    <img src="img/book5.jpg" alt="">
                </div>

            </div>
            <div id="loading"></div>
        </div>
        
        
        <!-- 左右按钮 -->
            <img src="img/left.png" alt="" id="leftBtn">
            <img src="img/right.png" alt="" id="rightBtn">


    </div>





    <!-- 底部 -->

    <div id="lowCo">
        <span style="            
        position: absolute;
        top: 17%;
        left: 12%;
        font-size: 12px;
        color: white;">关注我们</span>
        <div id="QR">

            <img src="img/QRcode.jpg" alt="" width="100%">

        </div>
        <span style="
            position: absolute;
            top: 77%;
            left: 10.85%;
            font-size: 12px;
            color: white;"
            >官方微信二维码</span>
        <!-- <ul style="list-style-type:none">
                <li><a href="">服务指南</a></li>
                <li><a href="">关于我们</a></li>
        </ul> -->

        <span id="fwzn">
            <span style="font-size:16px">服务指南</span>
            <br>
            <br>
            办卡须知|Library Card
            <br>
            <br>
            读者须知|Reading Guldelines
            <br>
            <br>
            实体店分布|physical stores position
        </span>

        <span id="lxfs">
            <span style="font-size:16px">关于我们</span>
            <br>
            <br>
            <img src="img/hua1.png" alt="" id="hua1">
            电话：+86-25-6876 5999 
            <br>
            <br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;传真：+86-25-6876 5966
            <br>
            <br>
            <img src="img/hua2.png" alt="" id="hua2">
            邮箱：headway@headway-cn.net 
            <br>
            <br>
            <img src="img/hua3.png" alt="" id="hua3">            
            地址：河南省商丘市睢阳大道 
        </span>
    </div>        
        
</body>

<script>


    // 下拉菜单
    document.getElementById("indexBtn").onmouseover=function(){
        document.getElementById("down_span").style.height="70px";
    }
    document.getElementById("indexBtn").onmouseout=function(){
        document.getElementById("down_span").style.height="0px";
        
    }
    document.getElementById("down_span").onmouseover=function(){
        document.getElementById("down_span").style.height="70px";            
        document.getElementById("down_span").style.backgroundColor="#11643F"; 
        document.getElementById("down_span_reading").style.color="white"; 
    }
    document.getElementById("down_span").onmouseout=function(){
        document.getElementById("down_span").style.backgroundColor="white";            
        document.getElementById("down_span_reading").style.color="#595959"; 
        document.getElementById("down_span").style.height="0px";
    }

    document.getElementById("down_span").onclick=function(){
        window.location.href="reading.html";
    }


    // 左右切换
    var i = 0;
    function rightr(){
        i=i-100;
        if(i==-500){
            i=0;
            document.getElementById("block").style.left="0%";
            clearInterval(timer11);
            timer11=setInterval(rightr,5000);
            clearInterval(loadingTimer);
            j=0;
            document.getElementById("loading").style.width=j+"%";        
            loadingTimer=setInterval(loading11,5);
        }
        document.getElementById("block").style.left=i+"%";
        clearInterval(timer11);
        timer11=setInterval(rightr,5000);
        clearInterval(loadingTimer);
        j=0;
        document.getElementById("loading").style.width=j+"%";        
        loadingTimer=setInterval(loading11,5);
    }

    document.getElementById("rightBtn").onclick=rightr;

    document.getElementById("leftBtn").onclick=function leftl(){
        if(i==0){
            i=-400;
            document.getElementById("block").style.left="-400%";
            clearInterval(timer11);
            timer11=setInterval(rightr,5000);
            clearInterval(loadingTimer);
            j=0;
            document.getElementById("loading").style.width=j+"%";        
            loadingTimer=setInterval(loading11,5);
        }else{
            i=i+100;
            document.getElementById("block").style.left=i+"%"; 
            clearInterval(timer11);
            timer11=setInterval(rightr,5000); 
            clearInterval(loadingTimer);
            j=0;
            document.getElementById("loading").style.width=j+"%";        
            loadingTimer=setInterval(loading11,5);
        }
        

    }

    window.onload=function(){
        document.getElementById("title1").style.color="green";
        // document.getElementById("title1").onclick=
        document.getElementById("line").style.width="108px";
        // document.getElementById("line").style.width="108px";

    }

    // 进度条
    var j=0;
    function loading11(){
        j=j+0.1;
        document.getElementById("loading").style.width=j+"%";        
    }

    var loadingTimer=setInterval(loading11,5);

    
    var timer11=setInterval(rightr,5000);
</script>

<script type="text/javascript" src="JS/sweetalert-dev.js"></script>  

</html>